<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="a.js"></script>
</head>
<body>
    <canvas id="canvas" width="1920" height="800" style="background-color:black" >
    </canvas>

    <div>
        <button onclick="list=process_code()" >处理</button>
        <input type="number" id="select" name="tentacles" min="0" max="2555" />
        <input type="text" id="alias" style="width:400px;"/>

    </div>
    <div>
        <input type="text" id="mouse_info"/>
    </div>
    <div>
    <textarea id="code" cols="100" rows="30">
        *@1:INP @2:INN @3:V+ @4:V- @5:OUT
        .SUBCKT THS4031     1 2 3 4 5
        *
        * INPUT *
        Q1         33 1 17 NPN_IN 1
        Q2         34 2 17 NPN_IN 1
        *R1         17 06  1000
        *R2         17 07  1000

        * PROTECTION DIODES *
        D2         5 3 D1N
        D1         4 5 D1N
        D4         4 2 D1N
        D6         4 1 D1N
        D5         1 3 D1N
        D8         22 1 D1N
        D7         22 2 D1N
        D3         2 3 D1N

        * SECOND STAGE *
        Q3         08 Vref 33 PNP 0.5
        Q6         10 08 09 NPN 0.25
        Q4         10 Vref 34 PNP 0.5
        Q5         08 09 11 NPN 1
        Q7         09 09 12 NPN 1
        Cc         0 10  Ct 35p
        R3         4 11  333
        R4         4 12  333

        * SLEW RATE ENHANCEMENT *
        G6         0 10 1 2 1e-3

        * HIGH FREQUENCY SHAPING *
        Lhf         18 19  13n
        Rhf         13 19  25
        Chf         0  13  21p
        Ehf         18 0 10 0 1

        * OUTPUT *
        Q8         13 13 35 PNP 1
        Q9         13 13 14 NPN 1
        Q10         3 35 15 NPN 12
        Q11         4 14 16 PNP 14
        R5         20 15  10
        R7         16 20  10

        * COMPLEX OUTPUT IMPEDANCE *
        R8         32 20  10
        R9         31 20  10
        L1         31 5  20n
        C1         32 5  25p

        * BIAS SOURCES *
        G1         3 33 3 4 6.3e-6
        G2         3 34 3 4 6.3e-6
        G3         0 35 3 4 5.4e-6
        G4         17 4 3 4 5.25e-6
        G5         14 0 3 4 6.1e-6
        I1         3 33  DC 1.3e-3
        I2         3 34  DC 1.3e-3
        I3         0 35  DC 1.5e-3
        I4         17 4  DC 1.3e-3
        I5         14 0  DC 1.7e-3
        V1         3 Vref DC 2

        * MODELS *
        .MODEL NPN_IN NPN
        + IS=170E-18 BF=400 NF=1 VAF=100 IKF=0.0389 ISE=7.6E-18
        + NE=1.13489 BR=1.11868 NR=1 VAR=4.46837 IKR=8 ISC=8E-15
        + NC=1.8 RB=25 RE=0.1220 RC=20 CJE=120.2E-15 VJE=1.0888 MJE=0.381406
        + VJC=0.589703 MJC=0.265838 FC=0.1 CJC=133.8E-15 XTF=272.204 TF=12.13E-12
        + VTF=10 ITF=0.147 TR=3E-09 XTB=1 XTI=5 KF=2.75E-13

        .MODEL NPN NPN
        + IS=170E-18 BF=100 NF=1 VAF=100 IKF=0.0389 ISE=7.6E-18
        + NE=1.13489 BR=1.11868 NR=1 VAR=4.46837 IKR=8 ISC=8E-15
        + NC=1.8 RB=250 RE=0.1220 RC=200 CJE=120.2E-15 VJE=1.0888 MJE=0.381406
        + VJC=0.589703 MJC=0.265838 FC=0.1 CJC=133.8E-15 XTF=272.204 TF=12.13E-12
        + VTF=10 ITF=0.147 TR=3E-09 XTB=1 XTI=5

        .MODEL PNP PNP
        + IS=296E-18 BF=100 NF=1 VAF=100 IKF=0.021 ISE=494E-18
        + NE=1.49168 BR=0.491925 NR=1 VAR=2.35634 IKR=8 ISC=8E-15
        + NC=1.8 RB=250 RE=0.1220 RC=200 CJE=120.2E-15 VJE=0.940007 MJE=0.55
        + VJC=0.588526 MJC=0.55 FC=0.1 CJC=133.8E-15 XTF=141.135 TF=12.13E-12
        + VTF=6.82756 ITF=0.267 TR=3E-09 XTB=1 XTI=5

        .MODEL Ct CAP TC1=-0.0025

        .MODEL D1N D IS=10E-15 N=1.836 ISR=1.565e-9 IKF=.04417 BV=30 IBV=10E-6 RS=45
        + TT=11.54E-9 CJO=2E-12 VJ=.5 M=.3333

        .ENDS
    </textarea>
    </div>
    <script type="text/javascript">
        var select = document.getElementById('select');
        var mouse_info = document.getElementById('mouse_info');
        var canvas = document.getElementById('canvas');
        var old_buttons = 0;
        var down_x = 0;
        var down_y = 0;
        var select_x = 0;
        var select_y = 0;

        window.onkeydown = (ev)=>{
            console.log(ev.keyCode);
            //快捷键
            if(ev.keyCode==65){
                //key 'A'
                if(window.select_element){
                    window.select_element.hflip = !window.select_element.hflip;
                    process_draw_list(list,window.select_index);
                }
            }
            else if(('S').codePointAt()==ev.keyCode){
                if(window.select_element){
                    window.select_element.vflip = !window.select_element.vflip;
                    process_draw_list(list,window.select_index);
                }
            }
            else if(('R').codePointAt()==ev.keyCode){
                if(window.select_element){
                    if(window.select_element.rotate<0.4){
                        window.select_element.rotate = 0.5;
                    }
                    else if(window.select_element.rotate<0.9){
                        window.select_element.rotate = 1.0;
                    }
                    else if(window.select_element.rotate<1.4){
                        window.select_element.rotate = 1.5;
                    }
                    else if(window.select_element.rotate<1.9){
                        window.select_element.rotate = 0.0;
                    }
                    process_draw_list(list,window.select_index);
                }
            }

        }
        canvas.onmousedown = (ev)=>{
            var mouse_map = window['mouseclick_map'];
            var mm = mouse_map[ev.x] || {};
            window.select_index = mm[ev.y];
            if(typeof(window.select_index)=="number"){
                //window.select_element = list[window.select_index];
                console.log(window.select_index);
                window['mouseclick_map'] = [];
                process_draw_list(list,window.select_index);
            }
            else{
                process_draw_list(list,0);
                window.select_element = undefined;
            }
        }

        canvas.onmousemove = function(
            ev
        //:MouseEvent
        ){
            var e = window.select_element;
            var event_x = ev.offsetX;
            var event_y = ev.offsetY;
            if(e){
                //console.log(ev.buttons);
                if(!(old_buttons & 1) && ((ev.buttons & 1)!=0)){
                    //按下鼠标右键
                    //
                    {
                        down_x = event_x;
                        down_y = event_y;
                        select_x = e.draw_x;
                        select_y = e.draw_y;
                    }
                }
                else if((ev.buttons & 1)!=0){
                    //鼠标右键,移动目标
                    e.draw_x = select_x + (event_x - down_x) / e.scale();
                    e.draw_y = select_y + (event_y - down_y) / e.scale();
                    process_draw_list(list,window.select_index||select.value);
                    process_draw_net(window["netlist_map"]);
                }
                else if((old_buttons & 1)!=0){
                    //抬起事件
                    e.draw_x = select_x + (event_x - down_x) / e.scale();
                    e.draw_y = select_y + (event_y - down_y) / e.scale();
                    process_draw_list(list,window.select_index||select.value);
                    process_draw_net(window["netlist_map"]);
                }

                var x = event_x - e.draw_x * e.scale();
                var y = event_y - e.draw_y * e.scale();
                mouse_info.value = `X:${x},Y:${y},mouse:[${ev.offsetX},${ev.offsetY}]`;
            }
            old_buttons = ev.buttons;
        }
        select.onchange = function(){
            //process_draw_list(list,this.value);
            //console.log(this.value);
            //window.select_index = this.value;
        }
        </script>
</body>
</html>